<template>
  <n-space vertical :size="30">
		<div class="wy-filter">
			<n-space>
				<n-input v-model:value="name" placeholder="请输入要搜索的班级名称" />
				<n-select
					v-model:value="active" 
					style="width: 120px;" 
					:options="options"
					@update:value="search" />
				<n-button type="primary" @click="search">搜索</n-button>
				<n-button type="info" @click="add">新建班级</n-button>
			</n-space>
		</div>
		<n-grid :x-gap="12" :y-gap="20" :cols="4">
			<n-grid-item v-for="item in tableData.records" :key="item.id">
				<n-card
					class="wy-card-title">
					<template #header>
						<span class="grade-title" @click="() => gradeInfo(item.id)"  >{{item.name}}</span>
					</template>
					<grade-card :item="item" @updateDialog="update" @getTableData="getTableData" />
				</n-card>
			</n-grid-item>
		</n-grid>
		<n-pagination
			v-model:page="params.pageNo"
			:page-count="tableData.totalPage"
			@update:page="getTableData"/>
		<WyDialog
			v-model:show="dialog.show"
			:title="dialog.title">
			<WyEdit @getTableData="getTableData" :id="dialog.id" v-model:show="dialog.show" />
		</WyDialog>
	</n-space>
</template>

<script setup>
import WyDialog from '@/components/dialog'
import { list } from '@/api/gradeApi'
import GradeCard from '@/components/grade/card'
import WyEdit from '@/components/grade/edit'
import { useParamsStore } from '@/stores'
import { useRouter } from 'vue-router'
const router = useRouter()
const paramsStore = useParamsStore()
onMounted(() => {
	getTableData()
})
const options = [
	{
		label: '全部',
		value: ''
	},
	{
		label: '进行中',
		value: 1
	},
	{
		label: '已结束',
		value: 0
	}
]
const dialog = reactive({
	show: false,
	title: '',
	id: null
})
const name = ref('')
const active = ref('')
const params = reactive({
	name: '',
	pageNo: 1,
	pageSize: 8,
	active: null
})
const tableData = reactive({
	records: [],
	totalPage: 0
})
function getTableData () {
	list(params, content => {
		tableData.records = content.records
		tableData.totalPage = content.totalPage
	})
}
function search () {
	params.pageNo = 1
	params.name = name.value
	params.active = active.value
	getTableData()
}
function add() {
	dialog.title = '新建班级'
	dialog.id = null
	dialog.show = true
}
function update(id) {
	dialog.title = '修改班级'
	dialog.id = id
	dialog.show = true
}
function gradeInfo (id) {
	paramsStore.setParams({ gradeId: id })
	router.push({
		path: '/grade/detail'
	})
}
</script>

<style scoped lang="scss">
.wy-card-title {
	:deep(.n-card-header__main){
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.grade-title {
		font-size: 1.2rem;
		font-weight: bold;
		cursor: pointer;
	}
	.grade-title:hover {
		color: #1890ff;
	}
}
</style>